import NProgress from 'nprogress';
import { throttle, debounce } from '@/utils/utils';

export const editmenu_1 = {

    data() {
        return {
            legals: [false, false],
            tips: '',
            color: '#f00',
            songReady_l: false,
            songReady_r: false,
            value1: '',
            baseUrl: process.env.VUE_APP_SRC1,
            tagList: [],
            // tableData_l: [],
            // tableData_r: [],
            channelList: [],
            // pageTotal: 0,
            // query: {
            //     pageIndex: 1,
            //     pageSize: 10,
            //     importName: '',
            //     actorImportName: '',
            //     albumImportName: '',
            //     ids: ''
            // },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                tags: [{ required: true, message: '请选择标签', trigger: 'change' }],
                src: [{ required: true, message: '请选择封面', trigger: 'change' }]
            },
            reason: {
                remark: ''
            },
            visible: false,
            // form: {
            //     // tags: [],
            //     // excellentFlag: false,
            //     // name: '',
            //     // status: '',
            //     // publishTime: '',
            //     // describe: '',
            //     // songs: [],
            //     // coverImage: ''
            // },
            dragIndex: '',
            enterIndex: ''
        }
    },
    destroyed() {
        console.log('销毁');
        this.setPlayingState_r(false);
        this.setPlayingState_l(false);
        this.setCurrentIndex_r(-1);
        this.setCurrentIndex_l(-1);
        // this.tableData_l = [
        //     ...this.tableData_l.map(item => {
        //         item.paused = true;
        //     })
        // ];

        // this.tableData_r = [
        //     ...this.tableData_r.map(item => {
        //         item.paused = true;
        //     })
        // ];



        // this.tableData_l = [];
        // this.tableData_r = [];
    },
    created() {
        // if (this.$route.query.id) {
        //     this.form = {};
        //     this.tableData_r = [];
        //     this.tableData_l = [];
        //     this.getDataById(this.$route.query.id);
        //     // 获取渠道
        //     this.getChannelList();
        //     // 获取标签
        //     this.getTagData();
        // }

        // this.getSongListData();
        // console.log(this.$route.query.e);
    },
    watch: {
        '$route.name' (a, b) {
            console.log(a, b);
            if (a == 'EditMenu_1' && this.$route.query.id && (this.$route.query.e == '0' || this.$route.query.e == '1')) {
                // this.tableData_r = [];
                // this.tableData_l = [];
                // this.getDataById(this.$route.query.id);
                // // 获取标签
                // this.getTagData();
            } else if (b === 'EditMenu_1') {
                this.setPlayingState_r(false);
                this.setPlayingState_l(false);
                this.setCurrentIndex_r(-1);
                this.setCurrentIndex_l(-1);
                // this.tableData_l = [];
                // this.tableData_r = [];


                // this.SET_EDIT_RANKING_TABLEDATA_R([])
                // this.SET_EDIT_RANKING_TABLEDATA_L([])
            }
        },
    },
    methods: {
        handleShrink() {
            this.shrink = !this.shrink
        },
        async getChannelList() {
            try {
                const url = '/channel/query';
                const { data: res } = await this.$http[4].get(url, {});
                if (res.code != '0000') {
                    throw new Error(res.message);
                }

                if (res.data && res.data.length > 0) {
                    this.channelList = res.data;
                } else {
                    this.channelList = [];
                }
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        checkRequire(obj) {
            return this.$isEmpty(obj);
        },
        dragstart(index) {
            this.dragIndex = index;
        },
        dragenter(e, index) {
            e.preventDefault();
            // 避免源对象触发自身的dragenter事件
            if (this.dragIndex !== index) {
                // 避免重复触发目标对象的dragenter事件
                if (this.enterIndex !== index) {
                    const moving = this.tableData_r[this.dragIndex];
                    this.tableData_r.splice(this.dragIndex, 1);
                    this.tableData_r.splice(index, 0, moving);
                    // 排序变化后目标对象的索引变成源对象的索引
                    this.dragIndex = index;
                } else {
                    this.enterIndex = index;
                }
            }
        },
        dragover(e, index) {
            e.preventDefault();
        },
        handleTop(index, row) {
            console.log(index, row);
            if (index - 1 >= 0) {
                [this.tableData_r[index], this.tableData_r[index - 1]] = [this.tableData_r[index - 1], this.tableData_r[index]];
            } else {
                // 什么都不做
            }

            // this.tableData_r = [...this.tableData_r];
            this.SET_EDIT_RANKING_TABLEDATA_R([...this.tableData_r])
        },
        handleBottom(index, row) {
            console.log(index, row);
            if (index + 1 < this.tableData_r.length) {
                [this.tableData_r[index], this.tableData_r[index + 1]] = [this.tableData_r[index + 1], this.tableData_r[index]];
            } else {
                // 什么都不做
            }

            // this.tableData_r = [...this.tableData_r];
            this.SET_EDIT_RANKING_TABLEDATA_R([...this.tableData_r])
        },

        handleSearchName: debounce(function(value) {
            this.searchName(value);
        }, 1000),
        async searchName(name) {
            try {
                const url = '/playlist/checkName';
                const { data: res } = await this.$http[2].get(url, {
                    params: this.$removeField({
                        name
                    })
                });
                console.log(res);

                setTimeout(() => {
                    // console.log('发送请求！');
                    // this.goodResult = value.split('').join('-');

                    this.tips = res.message;
                    if (this.tips == '名称可用') {
                        this.color = '#409EFF';
                        // this.disabled = false;
                        this.legals[0] = false;
                    } else {
                        this.color = '#f00';
                        // this.disabled = true;
                        this.legals[0] = true;
                    }
                }, 500);
            } catch (err) {
                console.dir(err);
                // this.disabled = false;
                this.legals[0] = false;
            }
        },
        // 左边
        // handleSearch() {
        //     this.getSongListData();
        // },

        handleSearch: debounce(function() {
            // if (this.$isEmpty({
            //     importName: this.query.importName.trim(),
            //     actorImportName: this.query.actorImportName.trim(),
            //     albumImportName: this.query.albumImportName.trim(),
            //     ids: this.query.ids.trim()
            // })) {
            //     return this.$message.warning({
            //         message: '请输入搜索条件',
            //         duration: 1500
            //     })
            // }
            this.getSongListData();
        }, 300),
        handlePass() {
            this.$confirm('确定要通过吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.pass();
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消通过'
                    });
                });
        },
        async pass() {
            try {
                const url = '/playlist/verification';
                const { data: res } = await this.$http[2].get(url, {
                    params: this.$removeField({
                        id: this.$route.query.id
                    }),
                    headers: {
                        name: localStorage.getItem('ms_username')
                    }
                });

                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.SET_EDIT_RANKING_DATA([]);
                // this.SET_EDIT_RANKING_PAGETOTAL(0);
                // this.SET_EDIT_RANKING_QUERY({ ...this.editMenuQuery });

                this.$closeActiveTag.call(this);
                this.$router.replace({
                    path: '/edit/menu'
                });
            } catch (err) {
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleRefuse() {
            // this.$confirm('确定要拒绝吗？', '提示', {
            //     type: 'warning'
            // })
            //     .then(() => {
            //         this.refuse();
            //     })
            //     .catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消拒绝'
            //         });
            //     });
            this.visible = true;
            this.reason.remark = '';
        },
        async refuse() {
            try {
                const url = '/playlist/refuse';
                const { data: res } = await this.$http[2].get(url, {
                    params: this.$removeField({
                        id: this.$route.query.id,
                        remark: this.reason.remark
                    }),
                    headers: {
                        name: localStorage.getItem('ms_username')
                    }
                });
                this.visible = false;
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.SET_EDIT_RANKING_DATA([]);
                // this.SET_EDIT_RANKING_PAGETOTAL(0);
                // this.SET_EDIT_RANKING_QUERY({ ...this.editMenuQuery });
                this.$closeActiveTag.call(this);
                this.$router.replace({
                    path: '/edit/menu'
                });
            } catch (err) {
                console.dir(err);
                this.visible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        setValueNull() {
            this.getSongListData();
        },
        // 左侧歌曲列表数据
        async getSongListData() {
            try {
                NProgress.start()
                this.disabled = true;
                this.setPlayingState_l(false);
                for (var i = 0; i < this.tableData_l.length; i++) {
                    this.tableData_l[i].paused = true;
                }
                // this.tableData_l = [...this.tableData_l];

                this.SET_EDIT_RANKING_TABLEDATA_L([...this.tableData_l])

                const url = '/song/list';
                const { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        importName: this.query.importName.trim(),
                        actorImportName: this.query.actorImportName.trim(),
                        albumImportName: this.query.albumImportName.trim(),
                        ids: this.query.ids.trim(),
                        mediaType: 'audio'
                    }),
                    headers: {
                        pFlag: 'CN'
                    }
                });
                console.log('歌曲列表', res);
                if (res.data.content && res.data.content.length && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.paused = true;
                        if (item.songAuthTerritorie) {
                            item.songAuthTerritorie.endDateTime = this.$dateFormat(item.songAuthTerritorie.endDateTime, '', '-');
                        }

                        if (item.actors && item.actors.length > 0) {
                            item.actors.name = '';
                            // item.actors = [];
                            // item.actors.name = '';
                            item.actors.map(val => {
                                item.actors.name += val.name + '/';
                            });
                            item.actors.name = item.actors.name.slice(0, -1);
                            // ======
                            item.albumName = item.actors.name;
                            // ======
                        } else {
                            // item.tblActors = [];
                            // item.tblActors.name = '';

                            item.actors = [];
                            item.actors.name = '';
                        }
                        if (item.tblSongfiles && item.tblSongfiles.length > 0) {
                            item.tblSongfiles[0].filePath = `${this.baseUrl}/api/stream/audio?path=${item.tblSongfiles[0].filePath}`;
                        } else {
                            item.tblSongfiles = [];
                        }
                    });
                    this.setPlayList_l(res.data.content);

                    // this.tableData_l = res.data.content;
                    this.SET_EDIT_RANKING_TABLEDATA_L(res.data.content)

                    // this.pageTotal = res.data.totalElements || 0;
                    this.SET_EDIT_RANKING_1_PAGETOTAL(res.data.totalElements)
                } else {
                    // this.tableData_l = [];
                    this.SET_EDIT_RANKING_TABLEDATA_L([])
                        // this.pageTotal = res.data.totalElements || 0;
                    this.SET_EDIT_RANKING_1_PAGETOTAL(0)
                }
                NProgress.done()
                this.disabled = false;
            } catch (err) {
                console.log(err);
                NProgress.done()
                this.disabled = false;
                this.SET_EDIT_RANKING_TABLEDATA_L([])
                this.SET_EDIT_RANKING_1_PAGETOTAL(0)
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        removeFile() {
            // this.query.src = '';
            // this.SET_EDIT_RANKING_QUERY_1({ ...this.query, src: '' })
            this.show = false
            this.avatar = ''
        },
        upload(e) {
            // var event = e || window.event;
            // var target = event.target || e.srcElement;
            // var file = target.files[0];
            // this.$getImgTest_plus.call(this, e, target, file, 1, this.uploadFile);

            var event = e || window.event;
            var target = event.target || e.srcElement;
            var file = target.files[0];
            const isLt1M = file.size / 1024 / 1024 <= 1;
            if (!isLt1M) {
                return this.$message.error('上传图片大小不能超过1MB!');
            }
            this.form.coverImage = file;
            this.show = true;
            this.$getImgTest_plus.call(this, e, target, file, 1, () => {}, 'avatar');
        },
        // async uploadFile(e, target, file) {
        //     try {
        //         const isLt5M = target.files[0].size / 1024 / 1024 <= 5;
        //         if (!isLt5M) {
        //             return this.$message.error('上传图片大小不能超过5MB!');
        //         }

        //         // this.query.src = this.$getObjectURL(file);
        //         var formdata = new FormData();
        //         formdata.append('coverImage', file);
        //         formdata.append('id', this.$route.query.id);
        //         const url = '/playlist/uploadImg';

        //         NProgress.start();
        //         const { data: res } = await this.$http[2].post(url, formdata, {
        //             headers: {
        //                 'Content-Type': 'multipart/form-data',
        //                 name: localStorage.getItem('ms_username')
        //             }
        //         });
        //         console.log('响应数据', res);
        //         target.value = null;

        //         if (res.code != '0000') {
        //             this.$message.error({
        //                 message: res.message,
        //                 duration: 1500
        //             });
        //         } else {
        //             this.$message.success({
        //                 message: res.message,
        //                 duration: 1500
        //             });
        //             // this.getDataById(this.$route.query.id);
        //         }
        //         NProgress.done();
        //     } catch (err) {
        //         console.dir(err);
        //         NProgress.done();
        //         target.value = null;
        //         this.$message.error({
        //             message: err.message,
        //             duration: 1500
        //         });
        //     }
        // },

        async getTagData() {
            try {
                const url = '/tag/tagAll';
                const { data: res } = await this.$http[2].get(url, {
                    params: {
                        type: 4
                            // page: this.query.pageIndex,
                            // size: this.query.pageSize
                    }
                });
                // console.log('标签列表', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data && res.data.length > 0) {
                    res.data.map(v => {
                        v.disabled = true;
                    });
                    var ret = this.formatData(res.data);
                    console.log('ret', ret);
                    this.tagList = ret;
                    // this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.tagList = [];
                    // this.pageTotal = res.data.totalElements || 0;
                }
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        formatData(array) {
            for (let item of array) {
                item.value = item.id;
                item.label = item.description;
                item.children = [];
                // 删除返回的没用的属性
                delete item.type;
                delete item.createTime;
                delete item.description;
                delete item.groupId;
                delete item.id;
                delete item.name;
                delete item.status;
                delete item.updateTime;
                delete item.pid;

                if (item.tblTags && item.tblTags.length != 0) {
                    item.children = item.tblTags;
                    // 删除返回的没用的属性
                    delete item.tblTags;
                    this.formatData(item.children);
                } else {
                    delete item.children;
                }
            }
            return array;
        },
        async getDataById(mid) {
            try {
                NProgress.start();
                const url = '/playlist/info';
                const { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        playlistId: mid,
                        editFlag: this.$route.query.e === '1' ? true : false
                    })
                });
                console.log('编辑歌单', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                // 解构
                const requiredFields = {
                    name: '',
                    tags: [],
                    excellentFlag: '',
                    status: '',
                    publishTime: '',
                    describe: '',
                    coverUrl: '',
                    songs: [],
                    channels: []
                };
                var ret = this.$chooseFields(
                    res.data,
                    Object.keys(requiredFields), {},
                    requiredFields
                );

                // 中间处理
                // songs = songs ? songs : [];
                if (ret.songs.length > 0) {
                    for (var item of ret.songs) {
                        if (item.actors && item.actors.length > 0) {
                            item.actors.name = '';
                            for (var val of item.actors) {
                                item.actors.name += val.name + '/';
                            }
                            item.actors.name = item.actors.name.slice(0, -1);
                        } else {
                            item.actors = [];
                            item.actors.name = '';
                        }

                        // ============================================================
                        if (item.files && item.files.length > 0) {
                            item.files[0].url = `${this.baseUrl}/api/stream/audio?path=${item.files[0].url}`;
                        } else {
                            item.files = [{ url: '' }];
                        }
                    }
                    this.setPlayList_r(ret.songs);
                }

                ret.publishTime = ret.publishTime ? this.$timstampToStandardDate(ret.publishTime) : '';


                if (ret.coverUrl) {
                    // this.query.src = `${this.baseUrl}/api/stream/audio?path=${ret.coverUrl}`;
                    // this.SET_EDIT_RANKING_QUERY_1({ ...this.query, src: `${this.baseUrl}/api/stream/audio?path=${ret.coverUrl}` })
                    this.show = true
                    this.avatar = `${this.baseUrl}/api/stream/audio?path=${ret.coverUrl}`

                } else {
                    // this.query.src = '';
                    // this.SET_EDIT_RANKING_QUERY_1({ ...this.query, src: '' })
                    this.show = false
                    this.avatar = ''
                }

                if (ret.songs.length > 0) {
                    ret.songs.map(item => {
                        item.paused = true;
                        if (item.songAuthTerritorie) {
                            item.songAuthTerritorie.endDateTime = this.$dateFormat(item.songAuthTerritorie.endDateTime, '', '-');
                        }

                        if (item.tblAlbum && item.tblAlbum.length > 0) {
                            item.tblAlbum.name = '';
                            item.tblAlbum.map(item_ => {
                                item.tblAlbum.name += item_.name + ',';
                            });
                            item.tblAlbum.name = item.tblAlbum.name.slice(0, -1);
                        } else {
                            item.tblAlbum = [];
                            item.tblAlbum.name = '';
                        }
                    });

                    var obj = {};
                    ret.songs = ret.songs.reduce(function(item, next) {
                        obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
                        return item;
                    }, []);

                    ret.songs.sort((a, b) => {
                        return a.ontop - b.ontop;
                    });
                }



                // this.tableData_r = ret.songs;
                this.SET_EDIT_RANKING_TABLEDATA_R(ret.songs)
                this.setPlayList_r(this.tableData_r);
                this.$setActiveTag.call(this, ret.name);

                // 赋值
                // this.form = ret;
                this.SET_EDIT_RANKING_FORM(ret)
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // ...mapMutations(['SET_TAGSLIST']),
        handleAdd(index, row) {
            // console.log(index, row);
            var row = {...row };
            row.paused = true;
            if (this.tableData_r.length == 0) {
                this.tableData_r.unshift(row);
            } else {
                var index = this.tableData_r.findIndex(item => {
                    return item.id == row.id;
                });
                if (index != -1) {
                    return this.$message.warning({
                        message: '请勿重复添加',
                        duration: 1500
                    });
                } else {
                    this.tableData_r.unshift(row);
                }
            }
            if (this.currentIndex_r != -1) {
                this.setCurrentIndex_r(this.currentIndex_r + 1);
            } else {
                this.setCurrentIndex_r(-1);
            }

            this.setPlayList_r(this.tableData_r);
            // this.setPlayingState_r(false);
            // this.setPlayingState_l(false);
            // this.setCurrentIndex_r(-1);
            // for (var i = 0; i < this.tableData_r.length; i++) {
            //     this.tableData_r[i].paused = true;
            // }
            // this.tableData_r = [...this.tableData_r];
        },
        handleDelete(index, row) {
            this.tableData_r.splice(index, 1);
            this.setPlayList_r(this.tableData_r);
            console.log(row.paused, index);
            if (row.paused == false) {
                this.setCurrentIndex_r(-1);
                this.setPlayingState_r(false);
            } else if (row.paused == true) {
                var currentPlaySongIndex = this.tableData_r.findIndex(item => {
                    return item.paused == false;
                });
                this.setCurrentIndex_r(currentPlaySongIndex);
            }
        },
        rowClass({ row, rowIndex }) {
            return 'height: 26px;background-color:#ccc !important;color:#fff; text-align: center; color:#333;';
        },
        handleSave(saveFlag) {
            this.$confirm('确定要提交吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.save(saveFlag);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
        },
        getOneArray(twoArray) {
            var tempArr = [];
            if (twoArray && twoArray.length && twoArray.length > 0) {
                twoArray = Array.from(twoArray);
                twoArray.map(arr => {
                    arr = arr || [];
                    arr = Array.from(arr);
                    tempArr.push(arr[arr.length - 1]);
                });
            }
            return [...new Set(tempArr)];
        },
        async save(saveFlag) {
            try {

                NProgress.start();
                const url = '/playlist/update';
                var obj = this.$removeField({
                    id: this.$route.query.id,
                    name: this.form.name,
                    // tagIds: this.getOneArray(this.form.tags),
                    tagIds: this.form.tags,
                    status: this.form.status,
                    publishTime: this.$dateFormat(this.$standardDateToTimstamp(this.form.publishTime), '', '-'),
                    description: this.form.describe,
                    excellentFlag: this.form.excellentFlag,
                    songIds: this.getAllSongID(this.tableData_r),
                    saveFlag,
                    channels: this.form.channels.join(','),
                    coverImage: this.form.coverImage
                })
                var formdata = new FormData()
                for (var key in obj) {
                    formdata.append(key, obj[key])
                }
                const { data: res } = await this.$http[2].post(
                    url,
                    formdata, {
                        headers: {
                            name: localStorage.getItem('ms_username'),
                            // 'Content-Type': 'multipart/form-data' // 使用FormData会自动设置
                        }
                    }
                );
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });

                this.setPlayingState_r(false);
                this.setPlayingState_l(false);
                this.setCurrentIndex_r(-1);
                this.setCurrentIndex_l(-1);

                // var lis = document.querySelectorAll('.content-box .tags ul .tags-li');
                // lis = [...lis];
                // var activeIndex = lis.findIndex(item => {
                //     return item.classList.contains('active');
                // });
                // console.log(activeIndex, this.tagsList);
                // var tempArr = [...this.tagsList];
                // tempArr.splice(activeIndex, 1);
                // this.SET_TAGSLIST(tempArr);

                this.SET_EDIT_RANKING_DATA([]);
                // this.SET_EDIT_RANKING_PAGETOTAL(0);
                // this.SET_EDIT_RANKING_QUERY({ ...this.editMenuQuery });

                this.$closeActiveTag.call(this);
                // console.log(this.$getTagsDom());
                // 方式1
                this.$router.replace({
                    path: '/edit/menu'
                });

                // 方式2
                // this.getDataById(this.$route.query.id);
                // this.getTagData();
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
            }
            // this.display('none');
            // this.$router.replace({
            //     path: '/edit/menu'
            // });
        },
        // display(a) {
        //     this.$nextTick(() => {
        //         document.querySelector('.wrapper .content-box .tags ul .tags-li.active').style.display = a;
        //     });
        // },
        getAllSongID(array) {
            if (array && array.length && array.length > 0) {
                return array.map(item => {
                    return item.id;
                });
            } else {
                return [];
            }
        },
        handleCancel() {
            this.$handleUnlock.call(this, this.cancel, '/playlist/unlock', this.$route.query.id);
        },
        cancel() {
            this.$router.replace({
                path: '/edit/menu'
            });
        },
        // 分页导航
        handlePageChange1(val) {
            // this.$set(this.query, 'pageIndex', val);
            this.SET_EDIT_RANKING_QUERY_1({...this.query, pageIndex: val })
            this.tableData_l.map(v => {
                v.paused = true;
            });
            // this.tableData_l = [...this.tableData_l];
            this.SET_EDIT_RANKING_TABLEDATA_L([...this.tableData_l])
            this.setPlayingState_l(false);
            this.setCurrentIndex_l(-1);
            this.getSongListData();
        },
        handleSizeChange1(val) {
            // this.$set(this.query, 'pageSize', val);
            this.SET_EDIT_RANKING_QUERY_1({...this.query, pageSize: val })
            this.tableData_l.map(v => {
                v.paused = true;
            });
            // this.tableData_l = [...this.tableData_l];
            this.SET_EDIT_RANKING_TABLEDATA_L([...this.tableData_l])
            this.setPlayingState_l(false);
            this.setCurrentIndex_l(-1);
            this.getSongListData();
        }
    }
}